﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/UserControl/ItemsTemplate.ascx" TagPrefix="uc1" TagName="ItemsTemplate" %>
<%@ Register Src="~/UserControl/LoginPage.ascx" TagPrefix="uc1" TagName="LoginPage" %>
<%@ Register Src="~/UserControl/CompareBox.ascx" TagPrefix="uc1" TagName="CompareBox" %>
<%@ Register Src="~/UserControl/UboxReader.ascx" TagPrefix="uc1" TagName="UboxReader" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    
    <%--參考--%>
    <link href="Content/MainPage.css" rel="stylesheet" />
    <link href="Content/MainPageMenu.css" rel="stylesheet" />
    <script src="Scripts/MainPageMenu.js"></script>
    <%--參考--%>
    <style>
        /*Black Container*/
        .new-page-black-container {
            /*display: none;*/
            cursor: -webkit-zoom-out;
            z-index: 2000;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding-top: 40px;
            background-color: rgba(0, 0, 0, 0.45);
            overflow-y: auto; /*垂直滾輪*/
            display: none;
        }
        /*Black Container*/

        #tablenewscontainer {
            width: 70%;
            /*height: 445px;*/
            /*border: 1px solid #000000;*/
            margin: 0 auto;
        }

        .news-page-container {
            width: 70%;
            margin: 0 auto;
        }

        .news-page-content {
            background-color: #fff;
            border-radius: 6px;
        }

        @media (min-width: 960px) {
            .news-page-content {
                margin: 0 15%;
            }
        }

        @media (min-width: 1280px) {
            .news-page-content {
                margin: 0 15%;
            }
        }

        .news-page-content > div {
            padding: 20px;
        }

        .news-page-tile > span {
            font-size: 18px;
            /*color: #242424;*/
            color: #FF6600;
            margin-left: 10px;
            text-decoration: none;
            margin-left: 20px;
        }

        .news-page-tile, .news-container {
            border-bottom: 1px solid #dfdfdf;
        }

        .news-container {
            /*position:static;*/
            width: 290px;
            margin: 14px 7px 14px 7px;
            /*display:inline-block;*/
            /*height:300px;*/
        }



        .tablenewscontainer-title {
            text-align: right;
            /*border-bottom:1px solid #666;*/
            padding-bottom: 15px;
        }

        .tablenewscontainer-date {
            text-align: right;
            border-bottom: 1px solid #666;
        }

        .tablenewscontainer-content {
            padding-top: 10px;
        }

        .table-striped > tbody > tr:nth-child(even) > td,
        .table-striped > tbody > tr:nth-child(even) > th {
            background-color: #eee;
        }

        .table-hover > tbody > tr:hover > td,
        .table-hover > tbody > tr:hover > th {
            background-color: #66CCFF;
            color: #fff;
        }
         #tablenews th {
                background:#999;
                color:#fff;
                text-align: center;
            }
            #tablenews td {
                text-align: center;
                cursor: pointer;
            }

        .cate {
            float:left;
            width:200px;
            height:50px;
            border-right:1px inset #BBB;
            margin-top:20px;
            margin-right:30px;
        }
        .brand {
            float:left;
            width:650px;
            height:50px;
            margin-top:20px;

        }

        
    </style>
    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        
    <div class="menuAll">
        <div class="menu-container">
            <div class="cate">
                <div class="menu-cate ctr"><input type="hidden" class="page-ctr" value="6" /><div class="1"><div class="iconphone2 category-icon"></div></div></div>
                <div class="menu-cate ctr"><input type="hidden" class="page-ctr" value="7" /><div class="2"><div class="icontablet2 category-icon"></div></div></div>
                <div class="menu-cate ctr"><input type="hidden" class="page-ctr" value="8" /><div class="3"><div class="iconwear2 category-icon"></div></div></div>
            </div>
            <div class="brand">
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="9" /><div class="1"><div class="apple branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="10" /><div class="2"><div class="htc branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="11" /><div class="3"><div class="sony branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="12" /><div class="4"><div class="samsung branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="13" /><div class="5"><div class="lg branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="14" /><div class="6"><div class="nokia branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="15" /><div class="7"><div class="asus branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="16" /><div class="9"><div class="miui branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="17" /><div class="10"><div class="acer branklogo"></div></div></div>
                <div class="menu-brand ctr"><input type="hidden" class="page-ctr" value="18" /><div class="12"><div class="motorola branklogo"></div></div></div>
            </div>

        </div>
    </div>
    <div id="main-container" class="main-page"><%--文章容器--%>
        
        <div class="news-container ctr">
            <input type="hidden" class="page-ctr" value="20" />
            <div class="news-content">
                <div class="news-top">

                    <span><i class="glyphicon glyphicon-bullhorn"></i>&nbsp;最新消息</span>
                </div>
                <table id="tablenews" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <th>NEWS</th>
                        </tr>
                    </thead>
                </table>
                <div class="news-bottom">
                    <a href="News.aspx"><i class="glyphicon glyphicon-stats"></i>&nbsp;more</a>
                </div>
            </div>
        </div>
    </div>
    <%--新聞的跳出框--%>
    <div class="new-page-black-container">
            <div class="news-page-container">
                <div class="news-page-content">
                    <div class="news-page-tile">
                        <div class="jumbotron">
                        <div class="container">
                            <table id="tablenewscontainer">
                               

                            </table>
                        </div>
                        </div>
                  </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="mpItemPage" value="1"/>
    <input type="hidden" id="mpIsItemGet" value="1"/>
    <%--置頂--%>
     <div id="gotop"><i class="glyphicon glyphicon-chevron-up"></i></div>    
    <%--登入畫面--%>
    <uc1:LoginPage runat="server" ID="LoginPage" />

    <%--UBOX Tamplate--%>
    <uc1:CompareBox runat="server" ID="CompareBox" />
    <uc1:UboxReader runat="server" ID="UboxReader" />
    <%--UBOX Tamplate --%>

    <script src="Scripts/Article.js"></script>

    <style>
        .noscroll { position: fixed; }
    </style>
    <script>
        $(document).ready(function () {
            $(this).find('#keyword').show();
        })

        $(function () {
            /*讀取瀏覽紀錄用*/
            var ArticleSpanId = "Article";
            var TriggerReadArticleContainer = "container";
            var TriggerReadArticleButton = "item-image";
            /*瀏覽文章事件*/
            $("." + TriggerReadArticleContainer).on("click", "." + TriggerReadArticleButton, function (event) {
                $("." + TriggerReadArticleContainer).unbind("click");
                var ArticleId = this.id.substr(ArticleSpanId.length);
                ReadArticleAllevents(ArticleId, this.id);
                /*動態更改url*/
                $.cookie('c_url',window.location.pathname);
                window.history.pushState("", "", 'http://localhost/UBOX/UboxWeb/index.aspx?a_id=' + ArticleId + '&m_id=' + this.id);
            });
            $(".container").on("click", ".loveicon", function () {
                if (($.cookie("u_id") != null) && ($.cookie("u_id") != "null")) {
                    AddFavoriteArticle($(this).children().attr("class"), "12")
                }
            });
            //=========================================
            window.outerWidth -= 1;
            window.outerWidth += 1;
            //=========================================
        });
        /*loginCheck*/
        function LoginCheck(Type) {
            $.post("./Handler/HandlerMainPageArcitle.ashx", {
                type: Type
            },
            function (data) {
                if (data == "True") {
                    window.location = "index.aspx";
                }
            });
        }
        //-----最新消息--------------------------------------------------------------------------


        // btn取消&表單外部黑色屏蔽click event  
        $('.new-page-black-container').click(function () {
            $('.new-page-black-container').fadeTo(500, 0, hideNewsBlackContainer);
        });
        function hideNewsBlackContainer() {
            $('.new-page-black-container').hide();
            $('body').css('overflow-y', 'scroll');
            // 當預覽黑幕全部消失 才顯示body的拉霸
        };
        //-----最新消息--------------------------------------------------------------------------

        $('.recommend-content, .ubox-content, .introduction-content, .message-board-content').click(function (event) {
            event.stopPropagation();
        });
        function changeCookieStatus(elem) {
            var $this = elem;
            var cate = $this.attr('class');
            switch (cate) {
                case 1:
                    break;
            }
        }
        /*看新聞內容*/
        $(function () {
            NewsRead(1);
            //UnBoxingArticalNum("navItem1");
            $("#tablenews").on("click", "tr", function () {
                Newsload($(this));
            })
        });
        /*讀入資料標題*/
        function NewsRead(Target) {
            $.ajax({
                url: "./Handler/HandlerNews.ashx"
                , type: "post"
                , data: "type=4"
                    + "&PageNum=" + Target //做分頁 之後要改成PageNum
                , success: function (data) {
                    var content = "";
                    $.each(data, function (name, value) {
                        $.each(value, function () {
                            /*回傳===========================================*/
                            //$("#tablenews").hide().append("<tr id='titleid" + this.nid + "'><td colspan=2>" + this.date + "</td></tr><tr id='titleid" + this.nid + "'><td colspan=2>" + this.title + "</td></tr>").fadeIn(500)
                            $("#tablenews").hide().append("<tr id='titleid" + this.nid + "'><td colspan=2>" + this.title + "</td></tr>").fadeIn(500)
                            /*回傳===========================================*/
                        });
                    });
                    /*successEnd===========================================*/
                }
            });
        }
        /*讀入資料內容*/
        function Newsload(elem) {
            var $this = elem;
            var id = $this.attr('id').substr(7);
            $.ajax({
                url: "./Handler/HandlerNews.ashx"
                , type: "post"
                , data: "type=3"
                + "&content=" + id //做分頁 之後要改成PageNum
                , success: function (data) {
                    var content = "";
                    $.each(data, function (name, value) {
                        $.each(value, function () {
                            /*回傳===========================================*/


                            //$("#tablenewscontainer").html(" <tr><td> 內容</td><td>日期</td></tr><tr><td>" + this.content + "</td><td>" + this.date + "</td></tr>");
                            $("#tablenewscontainer").html(" <h2 class='tablenewscontainer-title'>" + this.title + "</h2><p class='tablenewscontainer-date'>" + this.date + "</p><p class='tablenewscontainer-content'>" + this.content + "</p>");
                            //顯示內容明細
                            $('.new-page-black-container').fadeTo(500, 1);

                            /*回傳===========================================*/
                        });
                    });
                    /*successEnd===========================================*/
                }
            });
        }
    </script>
    <%--客製參考--%>
    <script src="Scripts/MainPage.js"></script>
    <link href="Content/Pagination.css" rel="stylesheet" />
    <%--客製參考--%>

      
</asp:Content>

